<script>
    import { onMount } from 'svelte'
    export let data;
    onMount(()=>{
        console.log(data)
    })
</script>

<div class="container">
    <p class="title {data.color}">{data.title}</p>
    <p class="pay-number {data.color}">{data.subtitle}</p>
    <div class="columns is-multiline">
        {#each data.list as item}
        <div class="column is-6">
            <div style="width: 100%;">
                {item.key}: {@html item.val}
            </div>
        </div>
        {/each}
    </div>
</div>

<style lang="scss">
    .columns {
        width: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .column {
        width: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }
    .container {
        background: #fff;
        display: flex;
        margin: 10px 0 0 0;
        align-items: center;
        height: 100%;
        flex-direction: column;

        .title {
            font-size:26px;
            font-weight:400;
            line-height:35px;
            margin-top: 111px;
        }

        .pay-number {
            font-size:36px;
            font-weight:bold;
            line-height:35px;
            margin-bottom: 20px;
        }

        .pay-info {
            .left-info {
                display: inline-block;
                width:300px;
                font-size:20px;
                font-weight:400;
                line-height:52px;
                margin: 0 114px 0 0;
            }

            .right-info {
                font-size:21px;
                font-weight:400;
                line-height:62px;
            }
        }
    }
</style>
